<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import FireworksSingle from '@/components/FireworksSingle.vue';

// #######初始化时间属性
// 烟花升空时间为整个烟花时间的60%
// 烟花爆炸后持续时间为整个烟花时间的40%


const birthBeat = ref<boolean>(false)

// 字体出现  时间函数
let timer: any = null
onMounted((): void => {
  timer = setTimeout((): void => {
    birthBeat.value = true

    clearTimeout(timer)
  }, 2000)
})


// 初始化烟花属性
// const fireworksArr = reactive<fire[]>([
//   {
//     id: 0,
//     r: 100,
//     total: 16,
//     color: '#f00'
//   },
//   {
//     id: 1,
//     r: 70,
//     total: 10,
//     color: '#ffa600'
//   },
//   {
//     id: 2,
//     r: 40,
//     total: 6,
//     color: '#fdee64'
//   },
// ])

// 求烟花爆炸后水平和垂直位移的距离
interface distance {
  x: number,
  y: number,
}
const getDistance = (r: number, total: number, num: number): distance => {
  // 获取弧度
  const radian: number = 2 / total * Math.PI * num

  // 临边长度
  const x: number = Math.floor(Math.cos(radian) * r)
  // 对边长度
  const y: number = Math.floor(Math.sin(radian) * r)

  return {
    x,
    y
  }
}

// 时间函数 

// 控制烟花的出现
const fireShow = ref<boolean>(false)
// 烟花爆炸
let timer3: any = null
const fireBoom = ref<boolean>(false)

const showFirework = (): void => {
  let timer5: any = null

  timer5 = setTimeout(() => {
    fireBoom.value = true
    clearTimeout(timer5)
    timer5 = null
  }, 1200)
}

// 爆炸烟花属接口
interface fire {
  id: number,
  r: number,
  total: number,
  color: string
}

// 烟花组相关属性接口
interface fireworksPosition {
  duration: number,
  left: string,
  top: string,
  color: string,
  fireworksArr: fire[]
}
const setRandomFireworks = reactive<fireworksPosition[]>([])

onMounted((): void => {
  fireShow.value = true

  showFirework()

  // 烟花爆炸
  timer3 = setInterval((): void => {
    setRandomFireworks.splice(0)
    showFirework()
    fireBoom.value = false

    // 每次结束都重新分配烟花的位置
    // 生成速记数量的烟花
    const randomCount: number = 3
    // const randomCount: number = Math.floor(Math.random() * 20) + 10
    for (let i = 0; i < randomCount; i++) {
      setRandomFireworks.push({
        duration: Math.random() * 2 + 2,
        left: Math.random() * 100 + '%',
        top: `calc(${Math.random() * 100}% - 100rem)`,
        color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`,
        fireworksArr: [
          {
            id: 0,
            r: 100,
            total: 16,
            color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
          },
          {
            id: 1,
            r: 70,
            total: 10,
            color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
          },
          {
            id: 2,
            r: 40,
            total: 6,
            color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
          },
        ],
      })
    }

  }, 2000)
})


onUnmounted((): void => {
  clearInterval(timer3)
})
</script>

<template>
  <main>
    <div class="birth_text">
      <h1 ref="birth" :class="{ heartbeat: birthBeat }">生 日 快 乐</h1>
    </div>

    <!-- 烟花弹 -->
    <div v-for="fire, i in setRandomFireworks" :key="i" class="_fire_box" :style="{ top: fire.top, left: fire.left }">
      <!-- <div v-for="fire, i in setRandomFireworks" :key="i" :class="{ fire_box: fireShow }"
      :style="{ top: fire.top, left: fire.left }"> -->
      <!-- <div :class="{ firework_bomb: fireShow }" :style="{ backgroundColor: fire.color }"></div>
      <section v-for="item in fire.fireworksArr" :key="item.id">
        <div v-for="index in item.total" :key="index" class="fireworks"
          :style="fireBoom ? { transform: `translate(${getDistance(item.r, item.total, index).x}rem, ${getDistance(item.r, item.total, index).y}rem)`, opacity: 1, backgroundColor: item.color } : ''">
        </div>
      </section> -->
      <FireworksSingle :firework="fire" />
    </div>

  </main>
</template>

<style lang='scss' scoped>
.birth_text {
  position: relative;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);

  width: 100%;

  overflow: hidden;
  user-select: none;
}

@keyframes firstShow {
  0% {
    transform: scale(.3);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heartbeat {

  0%,
  60%,
  100% {
    transform: scale(1);
    color: #ff0;
  }

  7% {
    transform: scale(0.95) translate(-20rem, -20rem);
    color: rgb(21, 255, 0);
  }

  13% {
    transform: scale(1.1) translate(20rem, 20rem);
    color: rgb(255, 0, 0);
  }

  20% {
    transform: scale(0.8) translate(-20rem, -20rem);
    color: rgb(0, 255, 255);
  }

  40% {
    transform: scale(1.2) translate(-20rem, 20rem);
    color: rgb(98, 0, 255);
  }

  53% {
    transform: scale(0.9) translate(-20rem, -20rem);
    color: rgb(255, 0, 119);
  }
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #353535;

  h1 {
    animation: firstShow 0.8s ease 1.2s;

    font-size: 100rem;
    font-weight: 600;
    text-align: center;
    color: #00aeff;

    // transform: scale(.3);
    opacity: 0;

    &.heartbeat {
      animation: heartbeat 1s infinite;
      opacity: 1;
    }
  }

  @keyframes fire {

    0% {
      transform: translate(0, 0);
    }

    10% {
      transform: translate(0, -30%);
    }

    20% {
      transform: translate(0, -60%);
    }

    30% {
      transform: translate(0, -80%);
    }

    40% {
      transform: translate(0, -90%);
    }

    60%,
    100% {
      transform: translate(0, -100%);
    }

  }

  @keyframes fireShow {

    60% {
      transform: scale(1);
      opacity: 1;
      border-radius: 20%;
    }

    100% {
      transform: scale(1.5);
      opacity: 0;
      border-radius: 50%;
    }

  }


  ._fire_box {
    // .fire_box {
    // animation: fire 2s ease-out infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: 0;
    // transition: all;


    .firework_bomb {
      animation: fireShow 2s linear infinite;
      // animation-duration: 10s;
      position: absolute;
      bottom: -10rem;
      left: calc(50% - 10rem);
      width: 20rem;
      height: 20rem;

      background-color: #ffe600;
      border-radius: 20%;

    }

    .fireworks {
      position: absolute;
      left: calc(50% - 5rem);
      bottom: -5rem;

      width: 10rem;
      height: 10rem;
      background-color: #f00;
      color: #ff0800;
      opacity: 0;

      transition: transform 0.8s;
      // transition-duration: 10s;
    }
  }
}
</style>